import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';
import 'package:syn_4s/core/extension/build_context_extension.dart';
import 'package:syn_4s/core/extension/int_extension.dart';
import 'package:syn_4s/core/viewmodel/main_view_model.dart';
import 'package:syn_4s/ui/shared/app_theme.dart';

import '../../core/utils/date_format_utils.dart';
import 'main_fold.dart';

class MainTrackingSystem extends StatelessWidget {
  final Key? scrollKey;
  final MainViewModel viewModel;
  final String? title;

  const MainTrackingSystem(
      {super.key, this.scrollKey, required this.viewModel,this.title});

  @override
  Widget build(BuildContext context) {
    return MainFold(
      scrollKey: scrollKey,
      title: title??context.l10n.tracking_sys,
      child: Container(
        margin: EdgeInsets.only(left: 8.px, right: 8.px),
        height: 190.px,
        child: Row(
          children: [
            Obx(() => buildItem(context, viewModel.asset.value.expedTotal ?? 0,
                viewModel.asset.value.at,
                imageSrc: "assets/images/oval_red.svg",
                title: context.l10n.expired_today,
                color: AppTheme.redColor)),
            buildItem(context, viewModel.asset.value.expedTotal7 ?? 0,
                viewModel.asset.value.at,
                imageSrc: "assets/images/oval_yellow.svg",
                title: context.l10n.expired_7,
                color: AppTheme.orangeColor),
            buildItem(context, viewModel.asset.value.expedTotal30 ?? 0,
                viewModel.asset.value.at,
                imageSrc: "assets/images/oval_green.svg",
                title: context.l10n.expired_30,
                color: AppTheme.greenColor),
          ],
        ),
      ),
    );
  }

  Widget buildItem(BuildContext context, int num, DateTime? time,
      {required String imageSrc, required String title, required Color color}) {
    return Expanded(
        child: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Stack(
          alignment: Alignment.center,
          children: [
            SvgPicture.asset(
              imageSrc,
              width: 70.px,
              height: 70.px,
            ),
            Text(
              "$num",
              style: TextStyle(
                  fontSize: 20.px, color: color, fontWeight: FontWeight.w900),
            )
          ],
        ),
        Text(
          title,
          textAlign: TextAlign.center,
          style: const TextStyle(fontWeight: FontWeight.w900),
        ),
        Text(
          DateFormatUtils.dateTimeToStr(time, format: "dd-MM-yyyy HH:mm:ss"),
          textAlign: TextAlign.center,
          style: const TextStyle(fontWeight: FontWeight.w900),
        )
      ],
    ));
  }
}
